<template>
  <!-- 活动订单详情页 -->
  <van-pull-refresh class="wrap van_pull_refresh"  v-if="detail"
                    v-model="loading"
                    @refresh="getDetail"
  >
     <Header :title="orderStatusEnum[detail?.status]"  style="background: white"/>

    <div class="card" v-if="detail?.refundNumber">
      <div
        class="row"
        style="justify-content: space-between; width: 100%"
        @click="toRefundList"
      >

        <text>有{{detail?.refundNumber?.split(',').length}}笔售后单</text>
        <text>查看详情></text>
      </div>
    </div>
    <div style="height: 10px"></div>
    <OrderDetailInfo :data="detail"></OrderDetailInfo>
    <div style="height: 10px"></div>
    <div class="card">订单完成后获得 1 积分</div>
    <div style="height: 10px"></div>


    <div style="height: 10px"></div>

    <div>
      <div class="card">
        <div class="row" style="width: 100%">
          <a style="flex-grow: 1; color: black" :href="`tel:${detail.merchantTelephone}`">
            <div
              style="display: flex; flex-direction: column; align-items: center"
            >
              <van-icon name="phone-circle-o" />
              <text>联系客服</text>
            </div>
          </a>
          <div style="flex-grow: 1; color: black" @click="()=>{router.push('/')}">
            <div
                style="display: flex; flex-direction: column; align-items: center"
            >
              <van-icon name="home-o" />
              <text>首页</text>
            </div>
          </div>
          <!-- <div style="flex-grow: 1"></div> -->
          <div
            style="
              display: flex;
              flex-direction: column;
              align-items: center;
              flex-grow: 1;
            "
            @click="toRefund"
            v-if="detail?.status==1 && detail?.spuListVos?.length && detail?.spuListVos[0].skuTotalPrice && ! detail?.orderTicketVos?.some((e)=>e.state==1)"

          >
            <van-icon name="bill-o" />

            <text>退订</text>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 60px"></div>

    <!-- 未支付订单显示 -->

    <!-- <uni-popup ref="csPop" type="center">
      <uni-popup-dialog
        mode="base"
        message="成功消息"
        title="提示"
        content="如遇问题,请您拨打客服电话:010-89482008?"
        :duration="2000"
        :before-close="true"
        @close="close"
        @confirm="confirm"
      ></uni-popup-dialog>
    </uni-popup> -->
  </van-pull-refresh>
  <van-sticky :offset-bottom="0" position="bottom" v-if="detail?.status == 0">
    <div
        class="row"
        style="
          align-items: center;
          justify-content: end;
          width: 100%;
          background-color: white;
          padding: 5px;
          box-sizing: border-box;
        "
    >
      <div style="flex-grow: 1"></div>
      <text>合计：</text>
      <div class="row" style="align-items: center">
        <div v-if="coins > 0" class="row">
          <text class="moneyText" style="font-weight: bold"
          >{{ coins
            }}<text class="moneyText" style="font-size: 10px">积分</text>
          </text>
        </div>
        <img
            v-if="coins > 0 && price > 0"
            src="@/views/activityPages/assets/add5464.png"
            style="width: 12px; height: 12px"
        />
        <text v-if="price > 0" class="moneyText" style="font-weight: bold"
        >￥{{ price }}</text
        >

        <text v-if="price <= 0 && coins <= 0" class="moneyTextFree"
        >免费</text
        >
      </div>
      <div style="width: 20px"></div>
      <van-button
          type="primary"
          color="#ec6a2d"
          round
          @click="toPay"
          :loading="loadingPayUrl"
      >立即支付</van-button
      >
      <!-- <div class="button" @click="onConfirm">立即支付</div> -->
    </div>
  </van-sticky>
  <van-skeleton  :row="20" v-if="loading" />

</template>

<script setup lang="ts">
import OrderDetailInfo from '@/views/activityPages/components/coupon-order-detail-info.vue';
import { showConfirmDialog } from 'vant';
import { useRouter, useRoute } from 'vue-router';
import api from '@/api/index';
import {
  defineComponent,
  reactive,
  ref,
  defineProps,
  getCurrentInstance,
} from 'vue';

import ReservationType from '@/views/activityPages/const/reservation';
import { goPayUrl } from '@/utils/pay';
import QRBanner from "@/views/order-detail/components/QRBanner.vue";
import {orderStatusEnum} from "@/views/activityPages/const/orderStatus.ts";
import {shouldHideBtn} from "@/utils/wx-utils.ts";
const router = useRouter();
const route = useRoute();
function toRefundList() {
  // uni.navigateTo({ url: '/views/activityPages/refund/refund-list' });
  // router.push('/refund-list?id=111');
  router.push('/refund-detail?id=' + detail.value?.refundNumber);
}
let coins = 11;
let price = 11;



function toRefund() {
  router.push({
    path: '/scenic/refund/' + route.params.id,
  });
}



const detail = ref(null);
const loading = ref(false)
function getDetail() {
  loading.value=true
  api
    .getCouponOrderInfo({
      orderNumber: route.params.id,
    })
    .then((res) => {
      if (res.code == '200') {
        detail.value = res.data;
        coins = 0;
        price = res.data.actualPrice;
      }
    }).finally(()=>{
    loading.value=false
  });
}
getDetail();
const loadingPayUrl = ref(false);
function toPay() {
  loadingPayUrl.value = true;
  api
    .getPayld({ orderNumber: route.params.id,
      finishUrl: shouldHideBtn() ? null : window.location.origin+'/#'+ `activity-order/${route.params.id}?type=coupon`
    })
    .then((res) => {
      if (res.code == '200') {
        goPayUrl({ payId: res.data.payNumber });
      }
    })
    .finally(() => {
      loadingPayUrl.value = false;
    });
}
</script>

<style lang="scss" scoped>
@import url('@/views/activityPages/style/card.css');
.wrap {
  background: #f9f8f3;
  overflow: scroll;
  height: 100%;
}
.text1 {
  color: rgba(102, 102, 102, 1);
  font-size: 14px;
  text-align: left;
  font-family: PingFangSC-regular;
  font-weight: bold;
  padding-bottom: 5px;
}

.text2 {
  line-height: 14px;
  color: rgba(153, 153, 153, 1);
  font-size: 10px;
  text-align: left;
  font-family: PingFangSC-regular;
}

.row1 {
  justify-content: space-between;
  padding-bottom: 10px;
  width: 100%;
}
</style>
